/* global location */
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Table, Pagination } from 'antd';
import { getOrders, ordersInit } from '../../../action/actionOrders';
import PaginationConfig from '../../../config/pagination';
class OrderManagement extends Component {
    constructor () {
        super();
        this.query = {
            page: 1,
            page_size: 30,
        };
        const that = this;
        this.pageConfig = Object.assign({}, PaginationConfig, {
            pageSize: that.query.page_size,
            onChange (page, pageSize) {
                that.pageChangeHandle(page, pageSize);
            },
        });
        this.columns = [
            {
                title: '序号',
                dataIndex: 'id',
                width: 50,
                fixed: 'left',
                render: (text, record, index) => <div>{(this.pageConfig.current - 1) * this.pageConfig.pageSize + index + 1}</div>,
            },
            {
                title: '用户名/ID',
                dataIndex: 'member_id',
                width: 200,
                render: (text, record) => <div>{record.member ? record.member.nickname + '/' + text : '空空空'}</div>,
            },
            {
                title: '货架名称',
                width: 200,
                dataIndex: 'shelf_name',
            },
            {
                title: '小计',
                width: 200,
                dataIndex: 'price',
            },
            {
                title: '下单时间',
                width: 200,
                dataIndex: 'create_time',
            },
            {
                title: '订单号',
                width: 200,
                dataIndex: 'code',
            },
            {
                title: '优惠券抵扣',
                width: 200,
                dataIndex: 'coupon_price',
            },
            {
                title: '小闪卡抵扣',
                width: 200,
                dataIndex: 'card_price',
            },
            {
                title: '实付款',
                width: 200,
                dataIndex: 'final_price',
            },
            {
                title: '付款来源',
                width: 200,
                dataIndex: 'pay_type',
            },
        ];
    }
    pageChangeHandle (page, pageSize) {
        this.pageConfig.current = this.query.page = page;
        this.query.page_size = pageSize;
        this.getList();
    }
    getList () {
        const { dispatch } = this.props;
        dispatch(getOrders({
            query: this.query,
        }));
    }
    componentWillMount () {
        const { isFetching, orders } = this.props;
        if (isFetching === 'success' && typeof (orders) === 'object' && orders.code === 0) return;
        this.getList();
    }
    componentWillUnmount () {
        const { dispatch } = this.props;
        dispatch(ordersInit());
    }
    render () {
        const { orders, isFetching } = this.props;
        let data = [];
        let total = 0;
        if (typeof (orders) === 'object' && orders.code === 0) {
            data = orders.items;
            total = orders.counts;
            this.pageConfig.current = orders.page * 1;
        }
        this.pageConfig.total = total;
        return (
            <div className='app-admin-main'>
                <div className='table-wrapper'>
                    <div className='table-wrapper_table'>
                        {<Table pagination={ false } loading={ isFetching === 'isFetching' } rowKey={ record => record.id } scroll={{ x: '130%' }} columns={this.columns} dataSource={data} />}
                        <Pagination {...this.pageConfig}/>
                    </div>
                </div>
            </div>
        );
    }
}
function select (state) {
    return {
        orders: state.orderList.orders,
        isFetching: state.requestStatus.status,
    };
}
export default connect(select)(OrderManagement);
